<template>
	<div class="other-component">
		<Banner></Banner>
		<!-- 专题部分 -->
		<div class="subject">
			<h1>专题</h1>
			<div>
				<img src="./../assets/img/1.jpg"/>
				<img src="./../assets/img/2.jpg"/>
				<img src="./../assets/img/3.jpg"/>
				<img src="./../assets/img/4.jpg"/>
			</div>
	    </div>
		<!-- 调用组件 -->
		<hot-goods
			v-for="item in baseStore.otherGoodsList"
			:hot-list="item"
			:key="item.cat_id"
			>
		</hot-goods>
	</div>
</template>

<script setup>
	import { watch } from 'vue';
	import { userBaseStore } from '../store';

	let baseStore = userBaseStore();

	//监听切换分类则调用方法获取数据
	watch(() => baseStore.nowActive,() =>{
		baseStore.getOtherData();
		
	},{immediate:true});
</script>

<style scoped lang="less"> 
	// 专题部分样式
	.subject{
		padding: 10px;
		box-sizing: border-box;

		div{
			width: 100%;
			white-space: nowrap;
			overflow-x: scroll;
			img{
				width: 48.5%;
				margin-right: 10px;
				border-radius: 8px;
			}
			// 去掉滚动条
			&::-webkit-scrollbar{width: 0px;}
		}
	}
</style>